<template>
  <!-- 个人中心页面 -->

  <div>
    <el-card>
      <div class="persona-background"></div>
      <div class="second-nav">
        <el-row>
          <el-menu
            :default-active="this.$router.path"
            router
            class="el-menu-demo"
          >
            <el-col :span="4">
              <el-menu-item index="/personal/personMessage"
                >个人信息</el-menu-item
              >
            </el-col>
            <el-col :span="4">
              <el-menu-item index="/personal/videlList"
                >视频列表&nbsp;{{ videoNumber }}</el-menu-item
              >
            </el-col>
            <el-col :span="4">
              <el-menu-item index="/personal/attentionNumber"
                >关注数&nbsp;{{ attentionNumberNumber }}</el-menu-item
              >
            </el-col>
            <el-col :span="4">
              <el-menu-item index="/personal/funNumber"
                >粉丝数&nbsp;{{ funNumberNumber }}</el-menu-item
              >
            </el-col>
            <el-col :span="4">
              <el-menu-item>获赞数&nbsp;{{ receiveNumber }}</el-menu-item>
            </el-col>
          </el-menu>
        </el-row>
      </div>
    </el-card>
    <router-view />
  </div>
</template>

<script>
import { getAuthorInfo } from "@/api/videoApi";
export default {
  data() {
    return {
      videoNumber: 0,
      attentionNumberNumber: 0,
      funNumberNumber: 0,
      receiveNumber: 0,
      viewsNumber: 0,
      id: sessionStorage.getItem("id"),
    };
  },
  computed: {},
  methods: {
    goPage(path, name) {
      const currentPath = this.$router.history.current.fullPath;
      if (currentPath !== path) {
        this.$router.push(path);
      }
    },
    getAuthorInfo() {
      getAuthorInfo(this.id)
        .then((res) => {
          this.videoNumber = res.data.data.list.length;
          this.attentionNumberNumber = res.data.data.idol;
          this.funNumberNumber = res.data.data.fans;
          this.receiveNumber = res.data.data.good;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },

  mounted() {
    this.getAuthorInfo();
  },
};
</script>

<style>
.persona-background {
  width: 1200px;
  height: 300px;
  margin: 0 auto;
  background-image: url("~@/assets/navImgs/background01.png");
  background-size: cover;
  background-position: 50%;
}

.second-nav {
  margin-left: 10%;
}

.second-nav ul li {
  float: left;
  list-style-type: none;
}

.second-nav ul li a {
  display: block;
  padding: 0 30px;
  line-height: 42px;
  font-size: 14px;
  color: #050505;
  text-decoration: none;
}

.second-nav ul li a:hover {
  color: #00a1d6;
  cursor: pointer;
  /*鼠标变小手*/
}
</style>
